<template>
  <el-scrollbar :wrap-class="{wrapClass: true}">
    <div class="app-container">
      <div class="filter-container">
        <el-input
          v-model="listQuery.title"
          placeholder="输入营销任务名称"
          style="width: 200px"
          class="filter-item"
          clearable
          @keyup.enter.native="handleFilter"
          size="small"
        />
        <date-selector v-model="listQuery.createdAt" type="daterange" style="width: 300px; vertical-align: middle" value-format="yyyy-MM-dd" />
        <el-select
          v-model="listQuery.state"
          placeholder="所有状态"
          clearable
          style="width: 120px"
          class="filter-item"
          size="small"
        >
          <el-option
            v-for="item in stateOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <div style="display: inline-block; margin-right: 10px"></div>
        <el-button
          plain
          v-waves
          class="filter-item"
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="handleFilter"
        >
          {{ $t("table.search") }}
        </el-button>
        <el-button
          plain
          size="mini"
          class="filter-item"
          style="margin-left: 10px"
          type="warning"
          icon="el-icon-s-promotion"
          @click="createMarketingTaskByServer"
        >
          服务器发送
        </el-button>
        <el-button
          plain
          class="filter-item"
          style="margin-left: 10px"
          type="success"
          size="mini"
          icon="el-icon-s-promotion"
          @click="handleEmailSendFree"
        >
          免费发送
        </el-button>
        <el-button
          plain
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          size="mini"
          icon="el-icon-magic-stick"
          @click="handleVerifyEmail"
        >
          邮箱有效性验证
        </el-button>
        <el-button
          size="small"
          class="filter-item right filter-left filter-refresh"
          icon="el-icon-refresh"
          type="primary"
          plain
          @click="refresh()"
        >
        刷新
        </el-button>
        <!-- <el-button
          v-waves
          :loading="downloadLoading"
          class="filter-item"
          type="primary"
          icon="el-icon-download"
          @click="handleDownload"
        >
          {{ $t('table.export') }}
        </el-button> -->
        <!-- <el-button
          plain
          v-waves
          :loading="downloadLoading"
          class="filter-item"
          type="primary"
          icon="el-icon-download"
          size="small"
          @click=""
        >
          批量删除
        </el-button>
        <el-button
          plain
          v-waves
          :loading="downloadLoading"
          class="filter-item"
          type="primary"
          icon="el-icon-download"
          size="small"
          @click=""
        >
          回收站
        </el-button> -->
        <!-- <el-checkbox
          v-model="showReviewer"
          class="filter-item"
          style="margin-left:15px;"
          @change="tableKey=tableKey+1"
        >
          {{ $t('table.reviewer') }}
        </el-checkbox> -->
      </div>

      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        :height="listQuery.total>0 ? 'calc(100vh - 205px)' : 'calc(100vh - 170px)'"
      >
        <el-table-column
          align="center"
          width="50"
          type="index"
        >
        <!-- sortable="custom" -->
        <!-- :class-name="getSortClass('id')" -->

        </el-table-column>

        <el-table-column label="营销任务名称" min-width="150px" align="center">
          <template slot-scope="{row}">
            <span class="link-type" @click="handleShowSendDataTracking(row.id)">
              <el-tag type="primary">{{ row.title }}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="类型" min-width="50px" align="center">
          <template slot-scope="{row}">
            <span v-if="row.type===1">
              <el-tag effect="plain" type="warning" >服务器</el-tag>
            </span>
            <span v-else>
              <el-tag effect="plain" type="success" >免费</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="80px" align="center">
          <template slot-scope="{row}">
            <template v-for="item in stateOptions" >
              <template v-if="item['key'] === row.state">
                <span :class="item.class" :key="item.key"><i :class="item.icon" />
                  {{ item.label }}
                </span>
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="提交数" min-width="70px" align="center">
          <template slot-scope="{row}">
            <span class="count_icon">
              <i class="el-icon-message"><span class="num-after-icon">{{ row.submitNum }}</span></i>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="发送数" min-width="70px" align="center">
          <template slot-scope="{row}">
            <span class="count_icon">
              <i class="el-icon-s-promotion"><span class="num-after-icon">{{ row.sendingNum }}</span></i>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="打开数" min-width="70px" align="center">
          <template slot-scope="{row}">
            <span class="count_icon">
              <svg
                t="1621230206287"
                class="icon"
                fill="#FF7908"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2120"
                width="20"
                height="20"
              >
                <path
                  d="M896 992H128c-52.928 0-96-43.072-96-96V416a32 32 0 0 1 64 0v480c0 17.632 14.368 32 32 32h768c17.632 0 32-14.368 32-32V416a32 32 0 0 1 64 0v480c0 52.928-43.072 96-96 96z"
                  p-id="2121"
                ></path>
                <path
                  d="M64 448a32 32 0 0 1-19.808-57.152l124.608-97.92a32 32 0 1 1 39.584 50.336l-124.608 97.92A32 32 0 0 1 64 448zM350.304 223.04a32 32 0 0 1-19.808-57.152l161.696-127.04a32 32 0 1 1 39.552 50.304l-161.696 127.04a31.776 31.776 0 0 1-19.744 6.848z"
                  p-id="2122"
                ></path>
                <path
                  d="M667.552 218.24a31.84 31.84 0 0 1-19.744-6.848l-155.552-122.24a31.936 31.936 0 0 1-5.376-44.928 31.968 31.968 0 0 1 44.928-5.376l155.552 122.24a31.936 31.936 0 0 1-19.808 57.152zM960 448a31.84 31.84 0 0 1-19.744-6.848l-126.688-99.552a31.936 31.936 0 0 1-5.376-44.928 31.904 31.904 0 0 1 44.928-5.376l126.688 99.552A31.936 31.936 0 0 1 960 448zM160.032 896a32 32 0 0 1-19.424-57.472l257.92-196.128a32 32 0 1 1 38.752 50.912l-257.92 196.128a31.552 31.552 0 0 1-19.328 6.56zM863.968 896a31.712 31.712 0 0 1-19.328-6.528l-257.92-196.128a32 32 0 1 1 38.752-50.912l257.92 196.128A32 32 0 0 1 863.968 896z"
                  p-id="2123"
                ></path>
                <path
                  d="M512 768.448a31.872 31.872 0 0 1-18.624-5.984l-448-320.448a32 32 0 0 1 37.216-52.064L512 697.088l429.376-307.136a32 32 0 1 1 37.216 52.064l-448 320.448a31.68 31.68 0 0 1-18.592 5.984z"
                  p-id="2124"
                ></path>
                <path
                  d="M832 516.832a32 32 0 0 1-32-32V224H224v260.832a32 32 0 0 1-64 0V224c0-35.296 28.704-64 64-64h576c35.296 0 64 28.704 64 64v260.832a32 32 0 0 1-32 32z"
                  p-id="2125"
                ></path>
                <path
                  d="M704 352H320a32 32 0 0 1 0-64h384a32 32 0 0 1 0 64zM704 480H320a32 32 0 0 1 0-64h384a32 32 0 0 1 0 64z"
                  p-id="2126"
                ></path>
              </svg>
              <span class="num-after-icon">{{ row.openNum }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="回复数" align="center" min-width="70px">
          <template slot-scope="{row}">
            <span class="count_icon">
              <!-- @click="handleGetPageviews(row.pageviews)" -->
              <i class="el-icon-chat-round"><span class="num-after-icon">{{ row.replyNum }}</span></i></span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          :label="$t('table.status')"
          class-name="status-col"
          width="100"
        >
          <template slot-scope="{row}">
            <el-tag :type="row.status | articleStatusFilter">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="提交时间" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.createdAt }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          min-width="120"
        >
          <template slot-scope="{row, $index}">
            <el-button-group>
              <!-- <el-tooltip
                class="item"
                effect="light"
                content="编辑"
                placement="top"
                v-if="row.state===1 && row.type===1"
              >
                <el-button
                  class="!border-orange-500 !text-orange-500"
                  size="mini"
                  @click="handleChangeState(row.id)"
                  icon="el-icon-edit"
                />
              </el-tooltip> -->
              <el-tooltip
                class="item"
                effect="light"
                content="修改发送时间"
                placement="top"
                v-if="(row.state===1||row.state===2)&&row.type===1"
              >
                <el-button
                  class="!border-orange-500 !text-orange-500"
                  size="mini"
                  @click="handleChangeTimingTransmission(row)"
                  icon="el-icon-timer"
                />
              </el-tooltip>
              <el-tooltip
                  class="item"
                  effect="light"
                  content="提交发送"
                  placement="top"
                  v-if="row.state===1 && row.type===1"
                >
                <el-button
                  class="!border-orange-500 !text-orange-500"
                  size="mini"
                  icon="el-icon-s-promotion"
                  @click="handleChangeState(row.id)"
                />
              </el-tooltip>
            <!-- <el-button
              class="!border-orange-500 !text-orange-500"
              size="mini"
              @click="handleCopy(row)"
            >
              克隆
            </el-button> -->
              <el-tooltip
                  class="item"
                  effect="light"
                  content="导出邮箱"
                  placement="top"
                >
                <el-button
                  class="!border-orange-500 !text-orange-500"
                  size="mini"
                  icon="el-icon-download"
                  @click="handleExportEmail(row.addresseeObj)"
                />
              </el-tooltip>
              <el-tooltip
                  class="item"
                  effect="light"
                  content="取消任务"
                  placement="top"
                >
                <el-button
                  class="!border-orange-500 !text-orange-500"
                  size="mini"
                  icon="el-icon-delete"
                  @click="handleCancelEmailMarketingTask(row)"
                />
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />

      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="tempArticleData"
          label-position="left"
          label-width="100px"
          style="width: 400px; margin-left: 50px"
        >
          <el-form-item :label="$t('table.type')" prop="type">
            <el-select
              v-model="tempArticleData.type"
              class="filter-item"
              placeholder="Please select"
            >
              <el-option
                v-for="item in calendarTypeOptions"
                :key="item.key"
                :label="item.displayName"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('table.date')" prop="timestamp">
            <el-date-picker
              v-model="tempArticleData.timestamp"
              type="datetime"
              placeholder="Please pick a date"
            />
          </el-form-item>
          <el-form-item :label="$t('table.title')" prop="title">
            <el-input v-model="tempArticleData.title" />
          </el-form-item>
          <el-form-item :label="$t('table.status')">
            <el-select
              v-model="tempArticleData.status"
              class="filter-item"
              placeholder="Please select"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('table.importance')">
            <el-rate
              v-model="tempArticleData.importance"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              :max="3"
              style="margin-top: 8px"
            />
          </el-form-item>
          <el-form-item :label="$t('table.remark')">
            <el-input
              v-model="tempArticleData.abstractContent"
              :autosize="{minRows: 2, maxRows: 4}"
              type="textarea"
              placeholder="Please input"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            {{ $t("table.cancel") }}
          </el-button>
          <el-button
            type="primary"
            @click="dialogStatus === 'create' ? createData() : updateData()"
          >
            {{ $t("table.confirm") }}
          </el-button>
        </div>
      </el-dialog>

      <el-dialog
        :visible.sync="dialogPageviewsVisible"
        title="Reading statistics"
      >
        <el-table
          :data="pageviewsData"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column prop="key" label="Channel" />
          <el-table-column prop="pageviews" label="Pageviews" />
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogPageviewsVisible = false">{{
            $t("table.confirm")
          }}</el-button>
        </span>
      </el-dialog>
      <showSendDataTracking
        :show.sync="showSendDataTrackingVisible"
        :rowId="sendDataTrackingId"
      />
      <edit-timing-transmission :show.sync="showEditTimingTransmissionVisible" :timingTransmission="timingTransmissionDialog" :id="id"/>
      <VerifyEmail :show.sync="showVerifyEmailVisible" />
      <pagination
        v-show="listQuery.total>0"
        :total="listQuery.total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
        :page-sizes="pageSize"
      />
    </div>
  </el-scrollbar>
</template>
<style scoped>

  .state_unsubmit {
    color: #609cd3;
  }

  .state_unsubmit > i {
    font-size: 20px;
    margin-right: 5px;
  }

  .state_submit {
    color: plum;
  }
  .state_submit > i {
    font-size: 20px;
    margin-right: 5px;
  }

  .state_cancel {
    color: orange;
  }
  .state_cancel > i {
    font-size: 20px;
    margin-right: 5px;
  }

  .state_complete {
    color: green;
  }
  .state_complete > i {
    font-size: 20px;
    margin-right: 5px;
  }

  .count_icon > i {
    @apply text-orange-500;
    font-size: 20px;
    margin-right: 5px;
  }

  .num-after-icon{
    color:black;
    margin-left:5px;
    font-size: 14px;
    font-family: "element-icons" !important;
  }
</style>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Form } from 'element-ui'
import { cloneDeep } from 'lodash'
import {
  getPageviews,
  createArticle,
  updateArticle,
  defaultArticleData
} from '@/api/articles'
import { IArticleData } from '@/api/types'
import { exportJson2Excel } from '@/utils/excel'
import { formatJson } from '@/utils'
import Pagination from '@/components/Pagination/index.vue'
import showSendDataTracking from './showSendDataTracking.vue'
import VerifyEmail from './verifyEmail.vue'
import DateSelector from '@/components/Public/dateSelector.vue'
import {
  getAction,
  postAction
} from '@/api/common'
import editTimingTransmission from './editTimingTransmission.vue'
const calendarTypeOptions = [
  { key: 'CN', displayName: 'China' },
  { key: 'US', displayName: 'USA' },
  { key: 'JP', displayName: 'Japan' },
  { key: 'EU', displayName: 'Eurozone' }
]
// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce(
  (acc: { [key: string]: string }, cur) => {
    acc[cur.key] = cur.displayName
    return acc
  },
  {}
) as { [key: string]: string }

@Component({
  name: 'EmailMarketingTaskIndex',
  components: {
    DateSelector,
    Pagination,
    VerifyEmail,
    showSendDataTracking,
    editTimingTransmission
  },
  filters: {
    typeFilter: (type: string) => {
      return calendarTypeKeyValue[type]
    }
  }
})
export default class extends Vue {
  @Prop() private ids!:any;
  private pageSize = [15, 30, 60, 100, 200, 300];
  private tableKey = 0;
  private list: IArticleData[] = [];
  private id = 0;
  private total = 0;
  private listLoading = false;
  private dialogFormVisible = false;
  private showVerifyEmailVisible = false;
  private emailSendFreeVisible = false;
  private showSendDataTrackingVisible = false;
  private showEditTimingTransmissionVisible = false;
  private sendDataTrackingId = 0;
  private timingTransmissionDialog = '2021-01-01 00:00:00';
  /// ////////////////////////////////////////////////////////////
  private listQuery = {
    page: 1,
    limit: 15,
    total: 0,
    title: undefined,
    state: undefined,
    createdAt: undefined,
    ids: undefined
  };

  /// ///////////////////////////////////////////////////////////
  private value2 = '';

  private stateOptions = [
    {
      key: 1,
      label: '未提交',
      icon: 'el-icon-edit-outline',
      class: 'state_unsubmit'
    },
    {
      key: 2,
      label: '已提交',
      icon: 'el-icon-circle-check',
      class: 'state_submit'
    },
    {
      key: 3,
      label: '已取消',
      icon: 'el-icon-circle-close',
      class: 'state_cancel'
    },
    {
      key: 4,
      label: '已完成',
      icon: 'el-icon-finished',
      class: 'state_complete'
    }
  ];

  private calendarTypeOptions = calendarTypeOptions;
  private sortOptions = [
    { label: 'ID Ascending', key: '+id' },
    { label: 'ID Descending', key: '-id' }
  ];

  private statusOptions = ['published', 'draft', 'deleted'];
  private showReviewer = false;

  private visible = false;
  private dialogStatus = '';
  private textMap = {
    update: 'Edit',
    create: 'Create'
  };

  private dialogPageviewsVisible = false;
  private pageviewsData = [];
  private rules = {
    type: [{ required: true, message: 'type is required', trigger: 'change' }],
    timestamp: [
      { required: true, message: 'timestamp is required', trigger: 'change' }
    ],
    title: [{ required: true, message: 'title is required', trigger: 'blur' }]
  };

  private downloadLoading = false;
  private tempArticleData = defaultArticleData;

  created() {
    this.listQuery.ids = this.ids ?? undefined
    this.getList()
  }

  private async handleShowSendDataTracking(value: number) {
    this.showSendDataTrackingVisible = true
    // console.log('value', value)
    this.sendDataTrackingId = value
  }

  private async handleVerifyEmail() {
    this.showVerifyEmailVisible = true
  }

  private handleChangeState(id: Number) {
    this.listLoading = true
    this.$confirm('此 操 作 将 提 交 营 销 任 务 ，确 定 提 交 吗 ？', '提示', {
      confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'
    }).then(() => {
      getAction('', `EmailMarketing/ChangeState?id=${id}`).then((res: any) => {
        if (res.code === 20000) {
          this.$message({
            message: '提交发送成功',
            type: 'success'
          })
          this.getList()
        } else {
          this.$message({
            message: '提交发送失败',
            type: 'warning'
          })
        }
      })
    }).finally(() => {
      this.listLoading = false
    })
  }

  private async handleEmailSendFree() {
    this.$router.push('/email/emailSendFree/add?fromPage=Index')
  }

  private async createMarketingTaskByServer() {
    this.$router.push('/email/emailServerSend/add?fromPage=Index')
  }

  private handleModifyStatus(row: any, status: string) {
    this.$message({
      message: '操作成功',
      type: 'success'
    })
    row.status = status
  }

  private resetTempArticleData() {
    this.tempArticleData = cloneDeep(defaultArticleData)
  }

  private handleCreate() {
    this.resetTempArticleData()
    // this.dialogStatus = 'create'
    // this.createMarketingTaskVisible = true
    // this.$nextTick(() => {
    //   (this.$refs.dataForm as Form).clearValidate()
    // })
  }

  private createData() {
    (this.$refs.dataForm as Form).validate(async(valid) => {
      if (valid) {
        const articleData = this.tempArticleData
        articleData.id = Math.round(Math.random() * 100) + 1024 // mock a id
        articleData.author = 'vue-typescript-admin'
        const { data } = await createArticle({ article: articleData })
        data.article.timestamp = Date.parse(data.article.timestamp)
        this.list.unshift(data.article)
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success',
          duration: 2000
        })
      }
    })
  }

  private handleUpdate(row: any) {
    this.tempArticleData = Object.assign({}, row)
    this.tempArticleData.timestamp = +new Date(this.tempArticleData.timestamp)
    this.dialogStatus = 'update'
    this.dialogFormVisible = true
    this.$nextTick(() => {
      (this.$refs.dataForm as Form).clearValidate()
    })
  }

  private updateData() {
    (this.$refs.dataForm as Form).validate(async(valid) => {
      if (valid) {
        const tempData = Object.assign({}, this.tempArticleData)
        tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
        const { data } = await updateArticle(tempData.id, {
          article: tempData
        })
        const index = this.list.findIndex((v) => v.id === data.article.id)
        this.list.splice(index, 1, data.article)
        this.dialogFormVisible = false
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      }
    })
  }

  private handleDelete(row: any, index: number) {
    this.$notify({
      title: 'Success',
      message: 'Delete Successfully',
      type: 'success',
      duration: 2000
    })
    this.list.splice(index, 1)
  }

  private async handleGetPageviews(pageviews: string) {
    const { data } = await getPageviews({ pageviews })
    this.pageviewsData = data.pageviews
    this.dialogPageviewsVisible = true
  }

  private handleDownload() {
    this.downloadLoading = true
    const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
    const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
    const data = formatJson(filterVal, this.list)
    exportJson2Excel(tHeader, data, 'table-list')
    this.downloadLoading = false
  }

  /// ////////////////////////////////////////////////////////////////
  private refresh() {
    this.listQuery = {
      page: 1,
      limit: 15,
      total: 0,
      title: undefined,
      state: undefined,
      createdAt: undefined,
      ids: undefined
    }
    this.getList()
    // console.log('refresh')
  }

  private handleFilter() {
    // console.log('search')
    this.getList()
  }

  private async getList() {
    this.listLoading = true
    const { data } = await postAction(this.listQuery, 'EmailMarketing/index')
    this.list = data.items
    this.listQuery.total = data.total
    this.listLoading = false
  }

  private async handleExportEmail(addresseeObj: any) {
    // console.log(addresseeObj)
    // const emailListTemp = addresseeObj.map((m: any) => m.addressee)
    this.downloadEmailTxt(addresseeObj)
  }

  private async downloadEmailTxt(addresseeObj: any) {
    let str = ''
    addresseeObj.forEach((item: any) => {
      str += item.addressee + '|' + item.name + '\r\n'
    })
    const export_blob = new Blob([str])
    const save_link = document.createElement('a')
    save_link.href = window.URL.createObjectURL(export_blob)
    save_link.download = '导出' + '.txt'
    this.fakeClick(save_link)
  }

  private async fakeClick(obj: any) {
    const ev = document.createEvent('MouseEvents')
    ev.initMouseEvent(
      'click',
      true,
      false,
      window,
      0,
      0,
      0,
      0,
      0,
      false,
      false,
      false,
      false,
      0,
      null
    )
    obj.dispatchEvent(ev)
  }

  private handleChangeTimingTransmission(row: any) {
    this.showEditTimingTransmissionVisible = true
    this.id = row.id
    this.timingTransmissionDialog = row.timingTransmission
  }

  private handleCancelEmailMarketingTask(row: any) {
    this.$confirm('此 操 作 将 取 消 营 销 任 务 ，确 定 吗 ？', '提示', {
      confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'
    }).then(() => {
      if (row.state === 1 || row.state === 2) {
        getAction({}, `EmailMarketing/CancelEmailMarketingTask?id=${row.id}`)
          .then(() => {
            this.$message({
              message: '任务已取消',
              type: 'success'
            })
          }).then(() => {
            this.refresh()
          })
      } else {
        this.$message({
          message: '当前状态不能进行此操作',
          type: 'warning'
        })
        return false
      }
    }).catch((e) => {
      // console.log('已取消操作')
    })
  }
}
</script>
